<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tabbar动画</title>
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="../font.css">
    <style>
        :root {
            --color: #222;
            --bg: orange;
            --w: 100px;
            --t: 450px;
            --c: 70px;
        }

        .container{
            background: #fff;
            width: var(--t);
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            position: relative;
        }
        .item{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: var(--w);
            cursor: pointer;
        }
        .item span{
            font-size: 20px;
            position: relative;
            z-index: 1;
            transition: all 0.5s;
        }
        .item p{
            position: absolute;
            font-size: 15px;
            font-weight: bold;
            color: var(--color);
            transform: translateY(20px);
            transition: all 0.5;
            opacity: 0;
        }
        .item:hover p,
        .item.active p{
            opacity: 1;
            transform: translateY(12px);
        }
        .item:hover span,
        .item.active span{
            transform: translateY(-35px);
        }
        .active-box{
            position: absolute;
            width: var(--c);
            height: var(--c);
            background: var(--bg);
            --left-pad: calc(var(--t) - (4 * var(--w)));
            top: -50%;
            left: calc(var(--left-pad) / 2 + (var(--w) / 2) - (var(--c) / 2));
            border-radius: 50%;
            border: 4px solid var(--color);
            transition: all 0.5s;
            transform: translateX(calc(var(--w) * var(--n)));
        }
        .active-box::before,
        .active-box::after{
            content: "";
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            background: transparent;
        }
        .active-box::before{
            left: -20px;
            border-radius: 0 20px 0 0;
            box-shadow: 0 -10px 0 0 var(--color);
        }
        .active-box::after{
            right: -20px;
            border-radius: 20px 0 0 0;
            box-shadow: 0 -10px 0 0 var(--color);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 第一个默认选中 -->
        <div class="item active" style="--n: 0">
            <span class="iconfont">&#xe611;</span>
            <p>三明治</p>
        </div>
        <div class="item" style="--n: 1">
            <span class="iconfont">&#xe65e;</span>
            <p>汉堡</p>
        </div>
        <div class="item" style="--n: 2">
            <span class="iconfont">&#xe698;</span>
            <p>沙冰</p>
        </div>
        <div class="item" style="--n: 3">
            <span class="iconfont">&#xe65c;</span>
            <p>可乐</p>
        </div>
        <!-- 添加选中圆环 -->
        <div class="active-box" style="--n: 0"></div>
    </div>
</body>
<script>
    const list = document.querySelectorAll(".item");
    let node = document.getElementsByClassName("active-box")[0];

    function clickActive(){
        list.forEach(item=>{
            item.classList.remove("active");
        });
        this.classList.add("active");
        // trim()删除字符串的头尾空白符;
        node.style.setProperty("--n",this.style.getPropertyValue("--n").trim());
    }
    list.forEach(item=>{
        item.addEventListener("click",clickActive);
    });
</script>
</html>